<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06-20</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
</head>
<!-- contactlist-component 시작 -->
<style>
#list  { width: 400px; border:1px solid black; border-collapse:collapse; }
#list td, #list th { border:1px solid black;  text-align:center; }
#list > thead > tr { color:yellow; background-color: purple; }
</style>
<template id="listTemplate">
    <div>
    <table id="list">
        <thead>
            <tr>
                <th>번호</th><th>이름</th><th>전화번호</th><th>주소</th>
            </tr>
        </thead>
        <tbody id="contacts" >
            <tr v-for="contact in contacts">
                <td>{{contact.no}}</td>
                <td>{{contact.name}}</td>
                <td>{{contact.tel}}</td>
                <td>{{contact.address}}</td>
            </tr>
        </tbody>
    </table>
    </div>
</template>
<script type="text/javascript">
Vue.component('contactlist-component', {
    template : '#listTemplate',
    props : [ 'contacts' ]    
})
</script>
<!-- contactlist-component 끝 -->

<body>

</body>
<script type="text/javascript">
Vue.config.devtools = true;

</script>
</html>
